<!DOCTYPE html>
<html>
<head>
    <title>ADMIN</title>
    <link rel="stylesheet" href="/statics/libs/vue/element-ui-2.4.11/element-ui.css">
    <!--<link rel="stylesheet" href="/statics/css/main.css">-->
    <script src="/statics/libs/jquery.min.js"></script>
    <script src="/statics/js/common.js"></script>
    <script src="/statics/libs/vue/vue-v2.5.21.js"></script>
    <script src="/statics/libs/vue/element-ui-2.4.11/element-ui.js"></script>
</head>
<body>
<div id="loginapp" class="login-box">
    <el-container>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="6" :offset="8">
                    <div class="grid-content bg-purple">
                        <el-form ref="loginFormRef" :rules="rules" :model="loginForm" label-width="80px">
                            <el-form-item  prop="username">
                                <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-success" clearable></el-input>
                            </el-form-item>
                            <el-form-item  prop="password">
                                <el-input type="password" placeholder="密码" v-model="loginForm.password" prefix-icon="el-icon-success" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-col :span="12" style="padding-left: 0;padding-right: 0;">
                                    <el-form-item prop="captcha">
                                        <el-input placeholder="验证码" v-model="loginForm.captcha" prefix-icon="el-icon-success" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" style="padding-left: 5px;padding-right: 0;">
                                    <el-form-item>
                                        <img style="border-radius: 5%;width:100%;height:40px;" alt="如果看不清楚，请单击图片刷新！"
                                             :src="src"
                                             @click="refreshCode">
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>


<script>
new Vue({
        el: '#loginapp',
        data: {
            loginForm: {
                username: null,
                password: null,
                captcha: '123'
            },
            rules: {
                username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
                password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
                captcha: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
            },
            src: 'captcha.jpg'
        }
        ,
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        methods: {
            refreshCode: function () {
                this.src = "captcha.jpg?t=" + $.now();
            },
            login: function (event) {
                var that = this
                that.$refs['loginFormRef'].validate((valid) => {
                    if (valid) {
                        var data = that.loginForm;
                        httpUtil.post({url: "sys/login", data: JSON.stringify(data)}, function (result) {
                            if (result.code == 0) {//登录成功
                                parent.location.href = 'index.html';
                                // parent.location.href = 'dashboard.html';
                            } else {
                                that.$message.error(result.msg);
                                that.refreshCode();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    });
</script>
<style>
    body{
        background: #3c8dbc;
    }
    .el-main{
        margin-top: 10%;
    }
    .el-form-item__label{
        text-align: justify;
        color: white;
    }
    .el-form-item .el-col {
        padding-left: 0px;
    }

    .el-button {
        width: 100%;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        padding-left: 0;
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 300px;
        min-width: 300px;
        padding: 30px;
        text-align: center;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
</body>
</html>
